<%@ page language="java"  contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>二维码生成 </title>
<style type="text/css">
.demo{width:400px; margin:40px auto 0 auto; min-height:250px;}
.demo p{line-height:30px}
</style>
<style type="text/css">
	#code{margin-top:10px}

* {
          color:#7F7F7F;
          font-family:Arial,sans-serif;
          font-size:12px;
          font-weight:normal;
      }    
      #config{
          overflow: auto;
          margin-bottom: 10px;
      }
      .config{
          float: center;
          width: 200px;
          height: 250px;
          border: 0px solid #000;
          margin-left: 10px;
      }
      .config .title{
          font-weight: bold;
          text-align: center;
      }
      .config .barcode2D,
      #miscCanvas{
        display: none;
      }
      #submit{
          clear: both;
      }
      #barcodeTarget;
      #canvasTarget{
        margin-top: 40px;
      }   
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/html2canvas.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-barcode-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
		var test_value=location.href;
	    var vals = test_value.split("value=");
	    var str = vals[1].split(",");
	    for(var i=0;i<str.length;i++){
		    if(str[i]){
		    	var str1 = "http://www.helloweba.com";
				$('#code').qrcode(str1);
				$("#code").empty();
				//执行二维码生成的方法
				var str2 = toUtf8(str[i]);
				//放入div的时候循环div
				var div = document.createElement("div");
				var span = document.createElement("div");
				span.innerHTML = "二维码";
				document.getElementById("position2").appendChild(div);
				div .innerHTML = "";
				$(div).qrcode({
					render: "table",
					width: 120,
					height:120,
					text: str2
				});
				document.body.appendChild(span);
				document.body.appendChild(div);
			}
	    }
});

function generateBarcode(){
		//接受传来的条码值，生成一维码即条形码
		var test_values=location.href;
	    var vae = test_values.split("value=");
		
		var valuers = vae[1].split(",");
		for(var i=0;i<valuers.length;i++){
			if(valuers[i]){
				var btype = $("input[name=btype]:checked").val();
				var renderer = $("input[name=renderer]:checked").val();
				
				var quietZone = false;
				if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
				  quietZone = true;
				}
				
				var span = document.createElement("span");
				span.innerHTML="条形码";
				document.getElementById("position").appendChild(span);
				var div = document.createElement("div");
				div.innerHTML = "";
				div.className="c";
				div.id = 'div1'+i;
				document.getElementById("position").appendChild(div);
				var settings = {
				  output:renderer,
				  bgColor: $("#bgColor").val(),
				  color: $("#color").val(),
				  barWidth: $("#barWidth").val(),
				  barHeight: $("#barHeight").val(),
				  moduleSize: $("#moduleSize").val(),
				  posX: $("#posX").val(),
				  posY: $("#posY").val(),
				  addQuietZone: $("#quietZoneSize").val(),
				};
				if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
					code:valuers[i]," rect:true";
				}
				if (renderer == 'canvas'){
				  clearCanvas();
				  $("#div1"+i).hide();
				  $("#canvasTarget").show().barcode(valuers[i], btype, settings);
				} else {
				  $("#canvasTarget").hide();
				  $("#div1"+i).html("").show().barcode(valuers[i], btype, settings);
				}
			
		 	}
		}
	  	
}
		  
		function showConfig1D(){
		$('.config .barcode1D').show();
		$('.config .barcode2D').hide();
		}
		
		function showConfig2D(){
			$('.config .barcode1D').hide();
			$('.config .barcode2D').show();
		}
		
		$(function(){
			$('input[name=btype]').click(function(){
				if ($(this).attr('id') == 'datamatrix') 
				  	showConfig2D(); 
				else 
				  	showConfig1D();
			});
			$('input[name=renderer]').click(function(){
				if ($(this).attr('id') == 'canvas') 
				  	$('#miscCanvas').show(); 
				else 
				  	$('#miscCanvas').hide();
			});
			generateBarcode();
	   });
		
function toUtf8(str) {   
    var out, i, len, c;   
    out = "";   
    len = str.length;   
    for(i = 0; i < len; i++) {   
    	c = str.charCodeAt(i);   
    	if ((c >= 0x0001) && (c <= 0x007F)) {   
        	out += str.charAt(i);   
    	} else if (c > 0x07FF) {   
        	out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));   
        	out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));   
        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
    	} else {   
        	out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));   
        	out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));   
    	}   
    }   
    return out;   
}  


function printById(id) {
    html2canvas(document.getElementById(id), {  
        allowTaint : true,  
        taintTest : false,  
        onrendered : function(canvas) {  
            canvas.id = "mycanvas";  
            //document.body.appendChild(canvas);  
            //çæbase64å¾çæ°æ®  
            var dataUrl = canvas.toDataURL();  
            var newImg = document.createElement("img");  
            newImg.src = dataUrl;  
            /* document.body.appendChild(newImg);  */  
            /* window.open(newImg.src); */  
            var printWindow = window.open(newImg.src);  
                // printWindow.document.write();   
                 printWindow.document.write('<img src="'+newImg.src+'" />')  
                 printWindow.print();  
        }  
    });  
}  
</script>
<style >
table{margin-bottom:15px; position:relative;margin-top:15px;}
table tbody{position:relative;}
#position{position:absolute;right:35%;top:35px;}
.c{height:116px;width:170px;margin-top:15px;}
</style>
</head>
<body id="main">
<div>
<div id="generator"><!-- 
      Please fill in the code : <input type="text" id="barcodeValue" value="12345670"> -->
      <div id="config" style="display:none;">
        <div class="config"  >
          <input type="radio" name="btype" id="code128" value="code128" checked="checked" ><label for="code128" >code 128</label><br />
        </div>
        <div class="config">
          <div class="title">Misc</div>
            bar width: <input type="text" id="barWidth" value="1" size="17"><br />
            bar height: <input type="text" id="barHeight" value="80" size="3"><br />
          </div>
      </div>
      <div id="position"></div>
      <div id="position2"></div>
 </div>
</div>
</body>

<div>
	<a href="#"  onclick="printById('main')"><input type="submit" value="打印"/></a>　　
	<a href="zcinfo/zcinfo_listper.jsp"><input type="submit" value="返回首页"/></a>
</div>
	
</html>